<template>  
  <div class="card">
    <motion.div 
      :initial="{ opacity: 0, y: 20 }"
      :animate="{ opacity: 1, y: 0 }"
      :transition="{ duration: 0.3 }"
    >
      <h1 class="title"><span class="middle">你的</span><img class="img" src="@/assets/images/ai2.png" alt=""><span class="text">医疗科研协助平台</span></h1>
      <p class="tip">加入会员计划，享受更丰富的专能能力服务！</p>
    </motion.div>
    <div class="info">
      <motion.div 
        class="item"
        :initial="{ opacity: 0, y: 20 }"
        :animate="{ opacity: 1, y: 0 }"
        :transition="{ duration: 0.3, delay: 0.2 }"
        :whileHover="{
          scale: 1.02,
          y: -7,
          boxShadow: '0 4px 18px 0 rgba(0, 0, 0, 0.25)',
          border: '2px solid #008bf8',
          transition: { duration: 0.1 }
        }"
      >
        <p class="name">
          <span class="text t1">TOKEN通道</span>
        </p>
        <ul class="list">
          <li>模力云调用</li>
          <li>源代码下载</li>
          <li>充值金额 <img class="img" src="@/assets/images/edit.png" alt="" /></li>
        </ul>
        <el-button class="btn">充 值</el-button>
      </motion.div>
      <motion.div 
        class="item"
        :initial="{ opacity: 0, y: 20 }"
        :animate="{ opacity: 1, y: 0 }"
        :transition="{ duration: 0.3, delay: 0.3 }"
        :whileHover="{
          scale: 1.02,
          y: -7,
          boxShadow: '0 4px 18px 0 rgba(0, 0, 0, 0.25)',
          border: '2px solid #008bf8',
          transition: { duration: 0.3 }
        }"
      > 
        <p class="name">
          <span class="text">会员通道</span>
        </p>
        <ul class="list">
          <li>算力饱和期优先通道</li>
          <li>源码折扣下载</li>
          <li>模力云调用折扣</li>
          <li>实验结果无水印</li>
        </ul>
        <el-button class="btn">充 值</el-button>
      </motion.div>
    </div>
    <motion.div
      class="more"
      :initial="{ opacity: 0, y: 20 }"
      :animate="{ opacity: 1, y: 0 }"
      :transition="{ duration: 0.3, delay: 0.4 }"
    >
      <el-button class="protocal-btn" type="text" @click="goProtocol('purchase')">《服务购买与使用协议》</el-button>
    </motion.div>
  </div>
</template>
<script setup>
import { motion } from "motion-v"
import { useRouter } from 'vue-router'
const router = useRouter()
const goProtocol = (type) => {
  const routeUrl = router.resolve('/protocol/' + type);
  window.open(routeUrl.href, '_blank');
}
</script>
<style lang="scss" scoped>
  .title{
    font-size: max(2.8vw, 36px);
    color: #000;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 20px;
    padding-top: 30px;
    .text{
      background: linear-gradient(to right, #2462F1, #273CDC, #4F21F2);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      vertical-align: middle;
    }
    .img{
      width: max(3.2vw, 40px);
      vertical-align: middle;
      margin: 0 5px;
    }
  }
  .tip{
    font-size: max(1.3vw, 18px);
    color: #172032;
  }
  .info{
    margin: 40px 0;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    .item{
      width: 48%;
      border-radius: 5px;
      padding: 20px 80px 130px;
      text-align: center;
      position: relative;
      background: url('@/assets/images/bg.png') no-repeat;
      background-size: cover;
      border: 2px solid transparent;
      .name{
        font-size: max(2.6vw, 30px);
        // font-size: 52px;
        margin: 40px 0 30px;
        font-weight: bold;
        .text{
          color: #000;
          position: relative;
          background: linear-gradient(to right, #2462F1, #273CDC, #4F21F2);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          &::before{
            content: '';
            width: max(2vw, 20px);
            height: max(2vw, 20px);
            position: absolute;
            bottom: min(.8vw, 8px);
            left: min(-3vw, -30px);
            background: url('@/assets/images/star1.png') no-repeat center center;
            background-size: 100%;
          }
          &::after{
            content: '';
            width: max(2vw, 20px);
            height: max(2vw, 20px);
            position: absolute;
            top: 0;
            right: min(-2.6vw, -30px);
            background: url('@/assets/images/star2.png') no-repeat center center;
            background-size: 100%;
          }
          &.t1{
            &::after{
              right: min(-1.6vw, -15px);
            }
          }
        }
      }
      .list{
        font-size: max(1.6vw, 20px);
        li{
          text-align: center;
          font-weight: 500;
          color: #000;
          position: relative;
          padding: 15px 0;
          margin-bottom: 15px;
          .img{
            width:  max(1.4vw, 18px);
            vertical-align: middle;
          }
          &:after{
            content: '';
            opacity: 0.09;
            background-image: linear-gradient(263deg, #32C5FF 0%, #B620E0 51%, #F7B500 100%);
            border-radius: 40px;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }
        }
      }
      .btn{
        font-size: max(1.5vw, 20px);
        color: #fff;
        padding: max(2vw, 26px) 0;
        background-image: linear-gradient(99deg, #2462F1 0%, #3C2CDC 100%);
        border: 3px solid rgba(47,84,235,1);
        border-radius: 41px;
        width: calc(100% - 160px);
        position: absolute;
        bottom: 30px;
        left: 80px;
        &::before,
        &::after{
          content: '';
          width: 92%;
          height: 14px;
          border-radius: 40px;
          position: absolute;
          top: 2px;
          left: 4%;
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
        }
        &::after{
          top: inherit;
          bottom: 2px;
          background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
        }
        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 10px 20px rgba(36, 98, 241, 0.3);
          transition: all 0.3s ease;
        }
      }
    }
  }
  .more{
    text-align: center;
    margin: 2.8vw 0;
    .protocal-btn{
      font-size: max(1.6vw, 18px);
    }
  }
  
</style>